﻿$(function(){
$(window).resize(function(){maxChart();});
//move dashboard
$('.dashboard').sortable(
{
	revert: true, 
	tolerance: 'intersect', 
	cursor: 'move', 
	handle: 'canvas',
	scroll : true,
	tolerance: 'pointer',
	start: function(event,ui){
			//$(".ui-sortable-placeholder").css({"visibility":"visible","background":"#F7F7F7"});
	},
	sort: function(event,ui){
			//alert(ui.item.siblings().attr("class"));
	}
});

//var selectedEffect = "scale";
maxCanvas();
closeCanvas();
function maxCanvas(){
	$('.max').live('click',function(){
	$('.shadow_bg').remove();
	var shadow = '<div class="shadow_bg"></div>';
	$('body').prepend(shadow);
	shadow_pic();
	var pindex = parseInt($(this).siblings('div').attr('value'));
	maxChart(pindex);
	if($.browser.msie) {
		$("#canvas").fadeIn(800);
		maxChart(pindex);
	}else{
		//$('#canvas').show(selectedEffect,{ percent: 100},200);//depends on jquery.effects.core.js and jquery.effects.scale.js
		$("#canvas").fadeIn(800);
	}
	return false;
});
}
function closeCanvas(){
	$('.cls').live('click',function(){
		var i = $(this).siblings('div').attr('value');
		$(this).parent().fadeOut(200);
		$('.org_avater:hidden').remove();
		enbDrop($('.report li#' + i + ' a'));
	});
}

function maxChart(pindex){
	var w = $('.dashboard').width() - 88;
	var h = $('.dashboard').height() + 2;
	$('#canvas').css({width: w, height: h}).jqChart(switchPod(pindex));
}
function switchPod(pindex){
	switch(pindex){
		case 1: return pod1; break;
		case 2: return pod2; break;
		case 3: return pod3; break;
		case 4: return pod4; break;
		case 5: return pod5; break;
		case 6: return pod6; break;
		default : return pod1; break;
	}
}

$('.shadow_bg').live('click',
		function(){
			/*	
			if($.browser.msie) {
				$("#canvas").fadeOut(200);
			}else{
				$('#canvas').hide(selectedEffect,{percent: 0},200, callback);
			}
			*/
			$("#canvas").fadeOut(200);
			$('.shadow_bg').remove();
			return false;
		}
	);
function callback() {
	$( "#canvas" ).removeAttr( "style" ).hide();
}
$('#canvas').draggable({containment: 'parent', scroll: false, cursor: 'move'});

//jqChart
var background = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#d2e6c9' },
                             { offset: 1, color: 'white'}]
            };
var pod1 = {
      			title: { text: 'Area Chart' },
				background: background,
      			axes: [
              			{
                  			type: 'category',
                  			location: 'bottom',
                  			categories: ["Jan","Feb","Mar","Apr","May","Jun"]
              			}
           			 ],
      			series: [
      						{
                      			type: 'area',
                      			title: 'Customer',
                      			data: [25,25,20,24,11,14]
                  			},
                  			{
                      			type: 'area',
                      			title: 'Focus',
                      			data: [15,13,5,20,3,7]
                  			}
                  			
               			]
  			};
var pod2 = {
      			title: { text: 'Column Chart' },
				background: background,
      			axes: [
              			{
                  			type: 'category',
                  			location: 'bottom',
                  			categories: ["FW20120201","FW20120202","FW20120203"]
              			}
           			 ],
     			 series: [
                  			{
                      			type: 'column',
                      			title: 'Plan effort',
                      			data: [36,48,29]
                  			},
                  			{
                      			type: 'column',
                      			title: 'Actural effort',
                      			data: [36,52,30]
                  			},
                  			{
                      			type: 'column',
                      			title: 'Remain effort',
                      			data: [4,2,0]
                  			}
              			]
  			};
var pod3 = {
     			title: { text: 'Line Chart' },
				background: background,
          		axes: [
                 			 {
                      			type: 'category',
                      			location: 'bottom',
                      			categories: ["2/28","3/7","3/14","3/21","3/28","4/4","4/11","4/18"]
                  			}
                			],
         		series: [
                      			{
                          			type: 'line',
                          			title: 'utilization',
                          			data: [106.2,105.0,100.0,100.2,110.0,102.9,106.0,107.0]
                      			}
                     		
                			 ]
  			};
var pod4 = {
    			title: { text: 'Pie Chart' },
				background: background,
   				 series: [
          			{
             			 type: 'pie',
              			data: [["General",5.5],["Department",6.3],["Maintenance",23.2],["New Release",65.0]],
              			labels: {
                  			stringFormat: '%d%%',
                  			valueType: 'percentage',
                   			font: '15px sans-serif',
                   			fillStyle: 'white'
              			},
             			 strokeStyle : 'black',
              			lineWidth : 2
          			}
        			]
			};
var pod5 = {
   				title: { text: 'Stacked Column Chart' },
				background: background,
    			axes: [
                			{
                    			type: 'category',
                    			location: 'bottom',
                    			categories: ["Open","Assign","InProgress"]
                			}
            			],
    			series: [
                			{
                    			type: 'stackedColumn',
                    			title: 'Non-Overdue',
                    			data: [15,10,12],
                    			labels: {}
                			},
                			{
                    			type: 'stackedColumn',
                    			title: 'Overdue',
                    			data: [0,3,2],
                    			labels: {}
                			}
            			]
				};
var pod6 = {
				title: { text: 'Spline Chart' },
				background: background,
				series: [
						  {
							  type: 'spline',
							  title: 'Series 1',
							  data: [[new Date(2010, 0, 1), 62], [new Date(2010, 0, 2), 60],
									 [new Date(2010, 0, 3), 68], [new Date(2010, 0, 4), 58],
									 [new Date(2010, 0, 5), 52], [new Date(2010, 0, 6), 60],
									 [new Date(2010, 0, 7), 48]]
						  },
						  {
							  type: 'spline',
							  title: 'Series 2',
							  data: [[new Date(2010, 0, 1), 46], [new Date(2010, 0, 2), 40],
									 [new Date(2010, 0, 3), 62], [new Date(2010, 0, 4), 65],
									 [new Date(2010, 0, 5), 60], [new Date(2010, 0, 6), 36],
									 [new Date(2010, 0, 7), 70]]
						  }
				]
			};
/*
$("#pod1").jqChart(pod1);    	   
$("#pod2").jqChart(pod2).bind('tooltipFormat', function (e, data) {
									return "<b>" + data.series.title + " : " + data.y + "</b>";
								});
$("#pod3").jqChart(pod3).bind('tooltipFormat', function (e, data) {
									var datay=data.chart.stringFormat(data.y, '%.1f%%');
									return "<b>" + data.x + " , " + datay + "</b>";
								});
$("#pod4").jqChart(pod4).bind('tooltipFormat', function (e, data) {
									var percentage = data.series.getPercentage(data.value);
									percentage = data.chart.stringFormat(percentage, '%.2f%%');
									return "<b>" + data.value + " (" + percentage + ")" + "</b>";
								});
$("#pod5").jqChart(pod5).bind('tooltipFormat', function a(e, data) {
									 return "<b>" + data.series.title + " : " + data.y + "</b>";
								});
$('#pod6').jqChart(pod6);

*/

//draggable
$('.report li a').draggable({
		appendTo: ".dashboard",
		helper: "clone",
		cursor: "move"
});	
$('.dashboard').droppable({
		accept: ":not(.ui-sortable-helper)",
		drop: function( event, ui ) {
				var i = parseInt($(ui.draggable).parent().attr('id'));
				if(!isNaN(i)){
					drawChart(i);
					disDrop($(ui.draggable));
				}
		}
});

drawInitChart();
function drawInitChart(){
$('.org_avater').each(function(i){
	var pod = switchPod(i + 1);
	$(this).children('div').attr({value : i+1}).jqChart(pod);
});
initState();
}

$('#defRpt').click(function(){
	$('.org_avater').remove();
	enbDrop($('.report li a'));
	var div = '<div class="org_avater"><span class="max"></span><span class="cls"></span><div></div></div>';
	for(var i = 0; i < 4; i++){
		$('.dashboard').append(div);
	}
	drawInitChart();
});

$('#clsAll').click(function(){
	$('.org_avater').remove();
	enbDrop($('.report li a'));
})

function disDrop(dragElemt){
	dragElemt.draggable('disable').css({cursor : 'default', background: '#dfdfdf',color:'black'}).siblings(':checkbox').attr('checked',true);
}
function enbDrop(dragElemt){
	dragElemt.draggable('enable').css({cursor : 'pointer', background : 'none', color : ''}).siblings(':checkbox').attr('checked',false);
}

function initState(){
	$('.org_avater').each(function(i){
		val = $(this).children('div').attr('value');
		if(val != ""){
			disDrop($('.report li#' + val + ' a'));
		}
	});
}

function drawChart(val){
	var div = '<div class="org_avater"><span class="max"></span><span class="cls"></span><div></div></div>';
	$(div).appendTo($('.dashboard')[0]).children('div').attr({value : val}).jqChart(switchPod(val));
}

$('ul.report li :checkbox').click(function(){
	var val = $(this).val();
	if($(this).attr('checked')){
		drawChart(parseInt(val));
		disDrop($(this).siblings('a'));
	}else{
		$('.org_avater>div[value =' + val + ']').parent().fadeOut(200);
		$('.org_avater:hidden').remove();
		enbDrop($(this).siblings('a'));
	}
})
//end js
});